<template>
  <div class="userMain">
    <div class="userDetail">
      <div v-if="userData.user_img">
        <van-image round :src="userData.user_img"/>
      </div>
      <div v-else>
        <van-image round :src="require('@/assets/default_photo.png')"/>
      </div>
      <div class="userEdit">
        <div class="userCount">
        <span>
          <p>0</p>
          <p>粉丝</p>
        </span>
          <span>
          <p>1</p>
          <p>关注</p>
        </span>
          <span>
          <p>2</p>
          <p>获赞</p>
        </span>
        </div>
        <div class="userBtn">
          <button @click="$router.push('/editinfo')">编辑资料</button>
        </div>
      </div>
    </div>
    <div class="userShow">
      <div class="userName">
        <span>{{ userData.username }}</span>
        <span>♂</span>
        <span>LV3</span>
      </div>
      <div v-if="userData.user_desc" class="userIntroduce">
        {{ userData.user_desc }}
      </div>
      <div v-else class="userIntroduce">
        这家伙很懒，什么都没有写！
      </div>
      <span class="userId">
        {{ userData.id }}
      </span>
    </div>
    <van-tabs v-model="active">
      <van-tab title="动态">暂无动态</van-tab>
      <van-tab title="视频">暂无视频</van-tab>
    </van-tabs>
  </div>
</template>

<script>
export default {
  name: 'UserDetail',
  data () {
    return {
      active: 1
    }
  },
  props: ['userData']
}
</script>

<style lang="less" scoped>
.userMain {
  background-color: #ffffff;
  padding: 0.208rem 0.3125rem;
}

.userDetail {
  display: flex;
  background-color: white;

  .van-image {
    width: 2.083rem;
    height: 2.083rem;
  }

  .userEdit {
    width: 100%;
    margin-left: 1.042rem;

    .userCount {
      display: flex;
      padding: 0.3125rem 0;

      span:nth-child(1), span:nth-child(2) {
        border-right: 1px solid #ccc;
      }

      span {
        flex: 1;

        p {
          padding: 0 !important;
          margin: 0 !important;
          text-align: center;
        }

        p:nth-child(2) {
          color: gray;
        }
      }
    }

    .userBtn {
      text-align: center;

      button {
        background: white;
        border: 1px pink solid;
        border-radius: 0.104rem;
        font-size: 0.271rem;
        color: pink;
        width: 75%;
        padding: 0.104rem;
      }
    }
  }
}

.userShow {
  padding-bottom: 0.208rem;
  border-bottom: 1px solid #d2d2d2;

  .userName {
    span {
      font-size: 0.417rem;
      margin: 0.104rem;
    }

    span:nth-child(2) {
      color: skyblue;
    }

    span:nth-child(3) {
      color: skyblue;
      font-size: 0.3125rem;
    }
  }

  .userIntroduce {
    color: gray;
    font-size: 0.292rem;
  }

  .userId {
    background-color: #e7e7e7;
    font-size: 0.292rem;
  }
}

</style>
